<!-- 营销 -->
<template>
  <div class="box">
    <div class="header">
      <div>
        <span>是否显示：</span>
        <el-select
          v-model="value"
          placeholder="全部"
          @change="changeStatus"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div>
        <span>秒杀名称：</span>
        <input
          v-model="search"
          placeholder="请输入秒杀名称"
        >
        <el-button
          icon="el-icon-search"
          circle
          @click="searchItem"
        />
      </div>
    </div>
    <div class="main">
      <el-button
        type="primary"
        class="add"
        @click="addConfig"
      >
        添加秒杀配置
      </el-button>
      <el-table
        :data="isShow === null ? tableData : isShow ? showDataT : showDataF"
        border
        style="width: 90%"
      >
        <el-table-column
          label="商品图"
          width="150"
        >
          <template slot-scope="scope">
            <img
              :src="scope.row.img"
              alt=""
            >
          </template>
        </el-table-column>
        <el-table-column
          fixed
          prop="id"
          label="ID"
          width="160"
        />
    
  
        <el-table-column
          prop="name"
          label="商品名称"
          width="150"
        />
        <el-table-column
          prop="price"
          label="商品售价"
          width="150"
        />
        <el-table-column
          prop="num"
          label="销量"
          width="150"
        />
        <el-table-column
          prop="num1"
          label="库存"
          width="150"
        />
        <el-table-column
          prop="num2"
          label="排序"
          width="150"
        />
        <el-table-column
          label="状态"
          width="150"
        >
          <!-- 如果要改每一行的状态就加一个template   slot-scope="scope"-->
          <!-- <template slot-scope="scope"> 
            <el-switch
              v-model="scope.row.value1"
              active-text=""
              name1="商家"
              inactive-text=""
            >
              上架
            </el-switch>
          </template> -->
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.stateFlag"
              active-color="#13ce66"
              inactive-color="#ccc"
            />
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleClick(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
            >
              加入回收站
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync="dialogVisible">
        <!-- <img
          width="100%"
          :src="dialogImageUrl"
          alt=""
        > -->
        <el-form
          ref="form"
          :rules="rules"
          :model="form"
          label-width="80px"
        >
          <h3 class="text">
            添加数据
          </h3>
          <el-form-item
            label="名称"
            prop="name"
          >
            <el-input
              v-model="form.name"
              placeholder="请输入名称"
            />
          </el-form-item>
          <el-form-item
            label="时间范围"
            prop="time"
          >
            <div
              class="block"
              size="mini"
            >
              <span class="demonstration">起始日期时刻为 12:00:00</span>
              <el-date-picker
                v-model="value"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['12:00:00']"
              />
            </div>
          </el-form-item>
          <el-form-item label="幻灯片">
            <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false"
            >
              <i
                slot="default"
                class="el-icon-plus"
              />
              <div
                slot="file"
                slot-scope="{file}"
              >
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                >
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in" />
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download" />
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete" />
                  </span>
                </span>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="状态">
            <el-switch
              v-model="value1"
              active-text="上架"
              name1="商家"
              inactive-text="下架"
            >
              上架
            </el-switch>
          </el-form-item>
   
          <el-button
            type="primary"
            @click="setaddComment"
          >
            提交
          </el-button>
        </el-form>
      </el-dialog>
      <el-pagination
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
// import axios from 'axios'
import {apiGetSeckillManager} from '@/api/seckillManager.js'
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
      search:'',
      dialogImageUrl:'',
        options: [ {
          value: "all",
          label: "全部"
        },
        {
          value: "show",
          label: "显示"
        },
        {
          value: "isShow",
          label: "不显示"
        }],
        value: '',
        value1: false,
         tableData: [],
         dialogVisible:false,
          form: {
          name: '',   
        },
        option:'',
          isShow:null,
        showDataT: [],
      showDataF: [],
        pageIndex:1,//当前页面
        pageSize:10,//当前页面显示的数据
        total:0,//总数
        rules:{
           name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
           title: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          num: [
            { type: 'number', required: true, message: '请选择日期', trigger: 'change' }
          ],
          num1: [
            { type: 'number', required: true, message: '请选择时间', trigger: 'change' }
          ],
          
         
        },
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},

//生命周期 - 创建完成（可以访问当前this实例）
// async created() {
//  if(this.tableData.length===0){
//   const res=await axios('/getSeckill') 
//   console.log(res)
//   this.tableData=res.data.data;
//  }
// },
created(){
 this.getSekill()
 },
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
 
//方法集合
methods: {
   //状态选择
    changeStatus(value) {
      if (value === "show") {
        this.isShow = true;
        this.showDataT = this.tableData.filter(item => {
          return item.stateFlag === true;
        });
      } else if (value === "isShow") {
        this.isShow = false;
        this.showDataF = this.tableData.filter(item => {
          return item.stateFlag === false;
        });
      } else if (value === "all") {
        this.isShow = null;
        // this.tableData = this.tableData;
      }
    },
    addConfig(){
        this.option='add'
         this.dialogVisible=true;
      },
      async getSekill(){
           const res=await apiGetSeckillManager({
            pageIndex:this.pageIndex,
            pageSize:this.pageSize
          })
          console.log(res,'sssss')
          this.tableData=res.data;
          this.total=res.total;
          },
       handleClick(row) {
         this.option='edit'
         this.dialogVisible=true;
         this.form={...row}
        console.log(row,'row');
        console.log(this.form,'formvvv')
      },
      handleCurrentChange(val){
         this.pageIndex=val;
         console.log(val,'val')
         this.getSekill()
        //   const res=await apiGetSeckill({
        //   pageIndex:this.pageIndex,
        //   pageSize:this.pageSize
        // })
        // console.log(res,'res111')
        // this.tableData=res.data;
        // this.total=res.total;
      },
     setaddComment(){
       if(this.option==='add'){
            this.tableData.push(this.form)
            console.log(this.form,'form')
            console.log(this.tableData,'ttt')
            this.dialogVisible=false;
       }
       else if(this.option==='edit'){
           console.log(this.form.id,'form')
          this.tableData.forEach(item=>{
              if(item.id===this.form.id){
                 item.name=this.form.name;               
              }
          })
          this.form={
            name:''
          }
          this.dialogVisible=false;
       }
      }, 
       searchItem(){
       this.tableData= this.tableData.filter(item=>{
         console.log(item)
          if(item.name.indexOf(this.search)!==-1){
             return item
          }
         
        })
      },
    
}
}
</script>
<style lang='scss' scoped>
img{
  width: 100px;
  height: 100px;
}

.header{
    display: flex;
}
.header div{
     margin-right: 20px;
}
.add{
    margin: 10px;
}
.header{
    margin-top: 10px;
}
.text{
    border-bottom: 1px solid #ccc;
    padding:0 10px;
    line-height: 50px;
}
</style>